
<template>
  <div class="recognition" v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)">
    <div style="text-align:center">
      <!-- 卡片视图 -->
      <el-card>
        <el-upload
          class="avatar-uploader"
          action="http://39.106.31.187:8888/recognition/image"
          :show-file-list="true"
          list-type="picture-card"
          :before-upload="handleBeforeUpload"
          :on-success="handleUploadSuccess"
          :on-error="handleUploadError"
        >
          <i class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <!-- <div style="text-align:center"> -->
            <center>
                <!-- {{response}} -->
                <el-table :data="response.result" >
                    <el-table-column label="准确度" align="center">
                        <template slot-scope="scope">
                           <el-progress :text-inside="true" :stroke-width="15" :percentage="(scope.row.score)*100" status="success"></el-progress>
                        </template>
                    </el-table-column>
                    <el-table-column label="结果分类" prop="root" align="center"></el-table-column>
                    <el-table-column label="鉴定结果" prop="keyword" align="center"></el-table-column>
                 </el-table>
            </center>
        <!-- </div> -->
        <!-- 图表容器 DOM -->
        <!-- <div id="container" style="width: 600px;height:400px;"></div> -->
      </el-card>
    </div>

  </div>
</template>

<script>
export default {
    data () {
        return {
            response:{},
            loading:false,
        }
    },
  //部件
  components: {},
  //静态
  props: {},
  //对象内部的属性监听，也叫深度监听
  watch: {},
  //属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用；
  computed: {},
  //方法表示一个具体的操作，主要书写业务逻辑；
  methods: {
      handleUploadSuccess(resp){
          this.response = resp;
         // this.progressNum = this.response.result[1][1];
          console.log(resp.result[1]);
           this.loading = false
      },
      handleBeforeUpload(){
          //开始loading
          this.loading = true
         
      },
      handleUploadError(){
          this.loading = false
      }
   
  },
  //请求数据
  created() {},
  mounted() {}
};
</script>

<style scoped></style>

